<!--百度柱状热力图-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>
    <BMap :mapOption="component.compConfigData.mapOption" @on-load-map-success="loadMapSuccessHandler"></BMap>
  </div>
</template>

<script>

import FuncCompMixin from '@/mixin/FuncCompMixin'
import BMapCompMixin from '@/mixin/BMapCompMixin'
import PnDesigner from '@/utils/PnDesigner'

const _this = {
  name: 'BMapBarHeatGridComp', // 此名称必须填写，且必须与组件文件名相同
  mixins: [FuncCompMixin, BMapCompMixin],
  attr: {
    version: '1.0',
    configDataTemp: Object.assign({

      mapOption: PnDesigner.buildBMapOptionConfigData(),
      heatGridLayerOption: {
        min: 0,
        max: 1000,
        maxHeight: 1000000,
        minHeight: 200,
        gridSize: 50000,
        gradient: {
          startColor: '#2196f3',
          centerColor: '#ff9800',
          endColor: '#ff5722'
        },
        riseTime: 1800
      }

    }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
      ds_resultObjTemplate: [
        {
          field: 'geometry',
          remark: '必须，指定坐标等数据，例：{coordinates: [116, 39]}'
        },
        {
          field: 'properties',
          remark: '必须，其他相关业务数据'
        }
      ],
      ds_resultObj: [
        {geometry: {coordinates: [116.392394, 39.910683]}, properties: {count: 800}},
        {geometry: {coordinates: [108.40202,22.758578]}, properties: {count: 560}},
        {geometry: {coordinates: [102.88283,24.823877]}, properties: {count: 465}},
        {geometry: {coordinates: [113.295701,23.09941]}, properties: {count: 790}},
        {geometry: {coordinates: [106.672674,26.590591]}, properties: {count: 300}},
        {geometry: {coordinates: [113.001344,28.167247]}, properties: {count: 600}},
        {geometry: {coordinates: [115.908117,28.687699]}, properties: {count: 500}},
        {geometry: {coordinates: [119.293219,26.093277]}, properties: {count: 300}},
        {geometry: {coordinates: [114.325949,30.520474]}, properties: {count: 630}},
        {geometry: {coordinates: [104.097052,30.520474]}, properties: {count: 390}},
      ],
      ds_useFilter: true, // 是否使用过滤器，默认不使用
      ds_useTimer: false, // 是否开启定时器配置，默认不开启
    }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration())
  },
  data() {
    return {
      heatGridLayer: null
    }
  },
  mounted() {

  },
  methods: {
    async init () { // 组价初始化函数，函数名必须使用init，不可更改
      this.initDatasource(() => {

      }, (result) => {

      });
    },

    loadMapSuccessHandler(map) {
      this.init().then(() => {
        this.map = map;

        this.view = new mapvgl.View({
          map: this.map
        });

        this.heatGridLayer = new mapvgl.HeatGridLayer({
          max: this.component.compConfigData.heatGridLayerOption.max, // 最大阈值
          min: this.component.compConfigData.heatGridLayerOption.min, // 最小阈值
          maxHeight: this.component.compConfigData.heatGridLayerOption.maxHeight, // 最大高度
          minHeight: this.component.compConfigData.heatGridLayerOption.minHeight, // 最小高度
          gridSize: this.component.compConfigData.heatGridLayerOption.gridSize,
          gradient: { // 对应比例渐变色
            0: this.component.compConfigData.heatGridLayerOption.gradient.startColor,
            0.5: this.component.compConfigData.heatGridLayerOption.gradient.centerColor,
            1: this.component.compConfigData.heatGridLayerOption.gradient.endColor
          },
          riseTime: this.component.compConfigData.heatGridLayerOption.riseTime, // 动画持续时间，毫秒
        });

        this.view.addLayer(this.heatGridLayer);
        this.heatGridLayer.setData(this.runCustomFilter(this.component.compConfigData.ds_resultObj));

        this.runCustomGlobalJsCode()
      })
    }
  },
  computed: {},
  watch: {
    'component.compConfigData.ds_resultObj': {
      handler: function (val, oldVal) {
        if (JSON.stringify(val) != JSON.stringify(oldVal)) {
          this.heatGridLayer.setData(this.runCustomFilter(this.component.compConfigData.ds_resultObj))
        }
      },
      deep: true
    }
  }
};

export default _this
</script>

<style scoped>

</style>
